{% extends "static/view/template.html" %}
{% block body %}

<div class="container">

	<div class="page-header">
	</div>

	<div class="page-header">
        <h1> <font color= #333333><center>Vim</center></font>
			<small><center><font color= #778899>Online editor for Vimers, press 'i' to edit</font></center></small>
		</h1>
	</div>

</div>

Current directory:
<ol class="breadcrumb">
    <li><a href="?working_dir=">root</a></li>
    {% for dir in DIR_LIST %}<li><a href="?working_dir={{dir.path}}">{{dir.name}}</a></li>{% endfor %}
</ol>
File listing:
<ol class="breadcrumb">
    {% for filefolder in FILEFOLDERS %}<li><a href="?working_dir={{WORKING_DIR}}{% if WORKING_DIR!='' %}/{% endif %}{{filefolder}}">{{filefolder}}</a></li>{% endfor %}
    {% for file in FILES %}<li><a href="?file_name={{file}}&working_dir={{WORKING_DIR}}">{{file}}</a></li>{% endfor %}
    <li><a href="?working_dir={% if DIR_LIST|length>1 %}{{DIR_LIST[-2].path}}{% else %}{% endif %}">..</a></li>
</ol>

<div class="alert alert-warning" role="alert"><result>Press "F10" to save!</result></div>
<script src="js/codemirror.js"></script>
<link rel="stylesheet" href="css/codemirror.css">
<link rel="stylesheet" href="css/solarized.css">
<script src="js/toml.js"></script>
<script src="js/vim.js"></script>
<form><textarea id="code" name="code">
{{CONTENT}}
</textarea></form>
<style>
.CodeMirror {
  border: 1px solid #eee;
  height: auto;
}
</style>
<script>
var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("code"), {
  mode:  "toml",
  theme: "solarized",
keyMap : "vim",
lineNumbers: true,
matchBrackets: true,
        showCursorWhenSelecting: true,
        extraKeys: {"F10": saveData}
        
});
myCodeMirror.on("blur", function(){myCodeMirror.save();$("result").html("Press \"F10\" to save!");});
function saveData() {
    var content = myCodeMirror.getValue();  
$.post("editor.html", {content: content,file_name:"{{FILE_NAME}}",working_dir:"{{WORKING_DIR}}"}, function(result){
            $("result").html(result);
        });
}
</script>

{% endblock %}
